.codeBlockContent {
  position: relative;
}

.codeBlockTitle {
  border-top-left-radius: var(--ifm-global-radius);
  border-top-right-radius: var(--ifm-global-radius);
  border-bottom: 1px solid var(--ifm-hr-border-color);
  color: var(--ifm-color-emphasis-400);
  font-size: 0.95em;
  font-weight: bold;
  padding: calc( var(--ifm-pre-padding) / 2 ) var(--ifm-pre-padding);
}

.codeBlock {
  overflow: auto;
  display: block;
  padding: 0;
  margin: 0;
}

.codeBlockWithTitle {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.copyButton {
  background: var(--ifm-background-color);
  background-clip: padding-box;
  border: 1px solid var(--ifm-panel-border-color);
  border-radius: var(--ifm-global-radius);
  color: var(--ifm-color-content);
  cursor: pointer;
  line-height: 12px;
  opacity: 0;
  outline: none;
  padding: 4px 8px;
  position: absolute;
  right: var(--ifm-pre-padding);
  top: var(--ifm-pre-padding);
  visibility: hidden;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
    bottom 200ms ease-in-out;
}

.copyButton:hover {
  border-color: var(--ifm-panel-border-color-active);
  box-shadow: var(--ifm-panel-box-shadow-active);
  color: var(--ifm-panel-color-active);
  text-decoration: none;
}

.copyButtonWithTitle {
  top: calc(var(--ifm-pre-padding));
}

.codeBlockTitle:hover + .codeBlockContent .copyButton,
.codeBlockContent:hover > .copyButton {
  visibility: visible;
  opacity: 1;
}

.codeBlockLines {
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
  float: left;
  min-width: 100%;
  padding: var(--ifm-pre-padding);
}
